<template>
  <!--  filterData:获取多选数据源,
    searchCommit:获取查询的数据,执行查询,
    searchFilter:获取筛选的数据,执行查询
    searchClean:重置处理
    searchClose:关闭弹窗
    singleSearch:是否激活搜索，默认是
  -->
  <div style="padding-top: 4px;padding-left: 5px; padding-bottom: 3px; max-width: 400px">
    <!-- 筛选+搜索  -->
    <div v-if="filterData.length > 0" class="selectStyle" @scroll="scroll" style="height: 250px; overflow: auto;">
      <a-input :placeholder="$t('user.v130')" style="max-width: 400px; display: block;"
               v-model="inputValue" v-if="singleSearch"/>
      <a-checkbox-group v-model="inputCheckValue" style="margin-top: 5px; margin-bottom: 5px" @change="checkBoxChange"
                        v-if="filterData.length > 0">
        <div v-for="(item, i) in filterData" :key="item.value + i"  >
          <a-checkbox :value="item.value">
            <span class="text">{{ item.text }}</span>
          </a-checkbox>
        </div>
      </a-checkbox-group>
      <br />
    </div>
    <!-- 没有筛选能力，纯搜索  -->
    <div v-else-if="singleSearch" style="padding-bottom: 5px">
      <a-input
        :placeholder="$t('user.v130')"
        style="width: 189px; display: block"
        v-model="inputValue"
      />
    </div>
    <a-empty :image="simpleImage" v-else />
    <!--  执行搜索功能  -->
    <a-button
      type="primary"
      icon="search"
      size="small"
      style="width: 90px; margin-right: 8px"
      @click="tableSearch()"
    >
      {{ $t("menu.form.basic-form") }}
    </a-button>
    <!--  返回  -->
    <a-button
      size="small"
      style="width: 90px; margin-right: 5px"
      @click="cleanTable()"
    >
      {{ $t("menu.form.step-form") }}
    </a-button>
  </div>
</template>

<script>
import { Empty } from "ant-design-vue";
export default {
  props: {
    filterData: {
      type: Array,
    },
    singleSearch: {
      type: Boolean,
      default: true
    },
    scroll:{
      type: Function,
      default: () => {}
    }
  },
  data() {
    return {
      inputValue: "",
      inputCheckValue: [],
      simpleImage: Empty.PRESENTED_IMAGE_SIMPLE,
    };
  },
  mounted() {},
  methods: {
    tableSearch() {
      // 不等于空再推送
      if (this.inputValue.trim() !== "") {
        console.log("this.inputValue", this.inputValue);
        // 推送搜索入参
        this.$emit("searchCommit", this.inputValue);
      } else if (this.inputCheckValue.length > 0) {
        // 推送筛选入参
        this.$emit(
          "searchFilter",
          this.inputCheckValue.join(","),
          this.inputCheckValue
        );
      } else {
        // 没有输入，默认就没值
        this.cleanTable("part");
      }
      // 关闭弹窗
      this.$emit("searchClose");
    },
    cleanTable(type = "all") {
      // 清理数据
      this.inputValue = "";
      this.inputCheckValue = [];
      // 重置查询
      this.$emit("searchClean", type);
      // 关闭弹窗
      this.$emit("searchClose");
    },
    checkBoxChange(e) {
      this.inputCheckValue = null;
      // 推送选中的值
      this.inputCheckValue = e;
    },
  },
};
</script>
<style>
.selectStyle {
  height: 300px;
  overflow: scroll;
}
</style>
<style lang="less" scoped>
.text {
  word-break: break-all;
}
</style>